<template>
  <div>
    <!-- 批量添加 -->
    <Dialog :appDialog="addBatch" @close="close">
      <div>
        <el-tabs v-model="activeName">
          <el-tab-pane label="个人线索" :name="1">
            <el-form :model="form">
              <ZWUpload :upInfo="fileInfo" @submit="getFile">
                <el-button @click="down" size="small" style="height: 32px">下载模板</el-button>
              </ZWUpload>

              <el-form-item label="公海池" required>
                <el-select v-model="form.clue_seas_id" placeholder="请选择线索公海">
                  <el-option v-for="(item, index) in seaids" :key="item" :value="item.id" :label="item.name">{{ item.name }}</el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="企业线索" name="2"></el-tab-pane>
        </el-tabs>
        <div class="contain">
          <div
            >1、文件必须为xlsx格式（如果为xlsx格式请另存为xlsx）<br />
            2、不支持导入存在多个工作表的文件，默认只导入第一个工作表 <br />3、同一个客户，在一个单元格里不支持填入多个手机号 <br />4、尽量避免合并单元格，否则导入可能存在异常 <br />5、文件内容不能包含公式，否则可能会影响导入结果
            <br />6、导入时异步处理了，只要提交就会在后台进行导入操作，请在导入任务重查看详情</div
          >
        </div>
      </div>
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch } from 'vue'
  import { ElMenuItem, ElMessage } from 'element-plus'
  import Dialog from '@/components/Dialog.vue'
  import ZWUpload from '@/components/ZWUpload.vue'
  import { download, seaList, batchAdd } from '@/api/customer/clubManage/commonSea'
  const props = defineProps(['isopen', 'seas_id'])
  const activeName = ref(1)
  const emit = defineEmits(['close','submit'])
  const form = reactive({ clue_seas_id: '', code: '' })
  const cancelBatch = () => {
    addBatch.visible = false
    emit('close')
  }
  const submitBatch = () => {
    batchAdd(form).then((res) => {
      ElMessage.success('批量添加成功')
      addBatch.visible = false
      emit('submit')
      emit('close')
    })
  }
  const addBatch = reactive({
    visible: false,
    label: '上传文件',
    title: '批量添加',
    width: '500px',
    cancel: cancelBatch,
    submit: submitBatch,
    cancelText: '取消',
    submitText: '确定'
  })
  const down = () => {
    download().then((res) => {
      location.href = res.file_url
    })
  }
  const seaids = ref([]) //公海列表
  //获取公海列表
  const getSeaList = () => {
    seaids.value = []
    seaList({ page: 1, page_size: 1000 }).then((res: any) => {
      seaids.value = res.data
    })
  }
  const fileInfo = reactive({
    type: 6,
    label: '上传文件',
    prop: 'files',
    uploadFileList: form.files,
    multiple: false,
    limitSize: 20,
    limitNum: 1,
    acceptFile: '.xls,.xlsx',
    uploadName: '上传文件'
  })
  const getFile = (data: any) => {
    form.code = data.length ? data[0].code : ''
  }
  const close = () => {
    emit('close')
  }
  watch(
    () => props.isopen,
    (val) => {
      if (val) {
        getSeaList()
        form.clue_seas_id = props.seas_id
        addBatch.visible = val
      }
    }
  )
</script>
<style scoped lang="scss">
  .contain {
    padding: 10px 16px;
    background: #fffaf9;
    border-radius: 4px;
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    color: #696969;
    line-height: 20px;
  }
</style>
